<template>
  <el-select :value="value" v-bind="$attrs" placeholder="选择公司" @change="changeHandle">
    <el-option v-for="l in list" :key="l[itemKey]" :value="l[itemKey]">{{ l.name }}</el-option>
  </el-select>
</template>

<script>
export default {
  model: {
    event: "change"
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    width: {
      type: [Number, String],
      default: 0
    },
    list: {
      type: Array,
      default: null
    },
    itemName: {
      type: String,
      default: "name"
    },
    itemKey: {
      type: String,
      default: "pkid"
    }
  },
  methods: {
    changeHandle(e) {
      if (!e) {
        return this.$emit("clear", { pkid: e, name: name });
      }
      const name = this.getValueName(e);
      this.$emit("change", { pkid: e, name: name });
    },
    getValueName(id) {
      return this.list.filter(e => e[this.itemKey] === id)[0][this.itemName];
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
